<template>
  
  <div style="display: flex;flex-direction: column;height: 100%;width: 100%;
    padding:12px 5%">

      <div style="display: flex;flex-direction: row;">
    
        <div style="flex:1;margin-right: 15px;">

          <div class="sort-data-pane">
            <div class="pane-title">数据状态</div>
            <div class="pane-item-list">
              <div class="pane-item" @click="filterStockOfZb('VCP', 'vcp')">
                <span class="item-icon">
                  <img src="../../../assets/images/VCP.svg">
                </span>
                <span class="item-name">VCP</span>
                <span class="item-value">{{ patternStaticsData.vcpCount }}</span>
                <span class="item-arrow">
                  
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>
              <div class="pane-item" @click="filterStockOfZb('杯柄', 'cup_and_handle')">
                <span class="item-icon">
                  <img src="../../../assets/images/杯柄.svg">
                </span>
                <span class="item-name">杯柄</span>
                <span class="item-value">{{ patternStaticsData.cupHandleCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>
              <div class="pane-item" @click="filterStockOfZb('收敛三角形', 'triangle')">
                <span class="item-icon">
                  <img src="../../../assets/images/下降三角.svg">
                </span>
                <span class="item-name">收敛三角形</span>
                <span class="item-value">{{ patternStaticsData.triangleCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('下降楔形', 'wedge')" >
                <span class="item-icon">
                   <img src="../../../assets/images/下降楔形.svg">
                </span>
                <span class="item-name">下降楔形</span>
                <span class="item-value">{{ patternStaticsData.wedgeCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('看涨旗形', 'flag')">
                <span class="item-icon">
                  <img src="../../../assets/images/看涨旗形.svg">
                </span>
                <span class="item-name">看涨旗形</span>
                <span class="item-value">{{ patternStaticsData.flagCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('双底', 'double_bottom')">
                <span class="item-icon">
                  <img src="../../../assets/images/双底.svg">
                </span>
                <span class="item-name">双底</span>
                <span class="item-value">{{ patternStaticsData.doubleBottomCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('灯芯', '')">
                <span class="item-icon">
                  <img src="../../../assets/images/灯芯.svg">
                </span>
                <span class="item-name">灯芯</span>
                <span class="item-value">{{ patternStaticsData.wickCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('口袋支点', '')">
                <span class="item-icon">
                  <img src="../../../assets/images/口袋支点.svg">
                </span>
                <span class="item-name">口袋支点</span>
                <span class="item-value">{{ patternStaticsData.pocketPointCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

              <div class="pane-item" @click="filterStockOfZb('头肩底', 'inverse_hs')">
                <span class="item-icon">
                  <img src="../../../assets/images/头肩底.svg">
                </span>
                <span class="item-name">头肩底</span>
                <span class="item-value">{{ patternStaticsData.inverseHsCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>
              
              <div class="pane-item" @click="filterStockOfZb('上涨缺口', '')">
                <span class="item-icon">
                  <img src="../../../assets/images/缺口.svg">
                </span>
                <span class="item-name">上涨缺口</span>
                <span class="item-value">{{ patternStaticsData.gapCount }}</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>

            </div>
          </div>

        </div>
    
        <div style="flex:1;margin-right: 15px;">

          <div class="sort-data-pane">
            <div class="pane-title">主流板块</div>
            <div class="pane-item-list">
            <div class="pane-item" v-for="item in marketViewSectorList" :key="item.maxSectorRsName" @click="filterStockOfSectorName(item)">
                <span class="item-name">{{ item.maxSectorRsName }}</span>
                <span class="item-value stock-text-red" v-if="item.riseAndFall>0">+{{ item.riseAndFall }}%</span>
                <span class="item-value stock-text-green" v-if="item.riseAndFall<=0">{{ item.riseAndFall }}%</span>
                <span class="item-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_1610_05888"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1610_05888)"><g><path d="M15.071100000000001,11.65686L9.4142,17.3137L8,15.89946L12.2427,11.65686L8,7.41421L9.4142,6L15.071100000000001,11.65686Z" fill="#bbbbbb" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
                </span>
              </div>
            </div>
          </div>

        </div>
    
        <div style="flex:1">
          <div class="sort-data-pane">
            <div class="pane-title">Deecp 50股</div>
            <div class="pane-item-list" :style="{'max-height': '276px','overflow-y': 'scroll'}">
              <div class="pane-item" style="background-color: #f9f9f9; border:0" 
                v-for="item in marketStrongStockListCompute" :key="item.stockCode" @click="filterStockOfStock(item)">
                <span style="display:flex"><img :src="item.logo" style="width:20px;"></span>
                <span class="item-name">{{ item.stockName }}</span>
                <span class="item-value stock-text-red" v-if="item.riseAndFall>0">+{{ item.riseAndFall }}%</span>
                <span class="item-value stock-text-green" v-if="item.riseAndFall<=0">{{ item.riseAndFall }}%</span>
              </div>
            </div>

          </div>

        </div>
    
      </div>


      <div style="display: flex; flex-direction: row; margin-top:1em;">
        <div class="sector-distribute" style="margin-right: 15px;">
          <div class="distribute-title">
              板块分布
          </div>
          <div style="display: flex;flex-direction: row;">
            <div style="display: flex;flex:1;flex-direction: column;">
              <div class="chart-title">一年新高板块分布</div>
              <div id="year-sectors-distribute" style="display:flex; height: 220px;flex:1"></div>
            </div>
            <div style="display: flex;flex:1;flex-direction: column;">
              <div class="chart-title">Deecp 50股板块分布</div>
              <div id="sectors-distribute" style="display:flex; height: 220px;flex:1"></div>
            </div>
          </div>
        </div>
        <div style="display: flex;flex:3">
          <div class="stock-distribute" >
          <div class="distribute-title">
              Deecp中期信号曲线
          </div>
          <div style="display:flex; height: 220px;flex:1;">
            <div id="stock-signal-distribute" style="display:flex; height: 220px;flex:1"></div>
          </div>
          </div>
        </div>
      </div>
  </div>
  
</template>

<script lang="ts" setup>
  
  import { ref, onMounted,computed, nextTick } from 'vue';
  import { message } from 'ant-design-vue';
  import { getPatternLatestStatics,getMarketViewSectors, getMarketStrongStocks,getSectorDistribute,getStockSectorDistribute,getStockSignalList } 
    from '/@/api/dp/patternstatics/patternstatics';
  import {getZbOfName} from '/@/api/dp/column/dpColumn'
  import * as echarts from "echarts";
  import { useRouter } from 'vue-router';
  const { currentRoute } = useRouter();

  const router = useRouter();

  const patternStaticsData = ref({});
  const marketViewSectorList = ref();
  const marketStrongStockList = ref([]);
  const marketStrongStockListCompute = computed(()=>{
    return marketStrongStockList.value.splice(0,marketStrongStockList.value.length)
  });
  const sectorDistributeList = ref([]);
  const stockSectorDistributeList = ref([]);
  const stockSignalList = ref([]);
  const stockSignalDates = ref([]);


  function filterStockOfSectorName(item){
    let stom = {
      "maxSectorRsName":item.maxSectorRsName,
      "extras": item.extras
    }
    localStorage.setItem('stockFilter',JSON.stringify(stom));
    router.push({
      name: 'ViewsStockSelectStock'
    });
  }
  function filterStockOfStock(item) {
    let stom = {
      "stockCode":item.stockCode
    }
    localStorage.setItem('stockFilter',JSON.stringify(stom));
    router.push({
      name: 'ViewsStockSelectStock'
    });
  }
  async function filterStockOfZb(zbName, zbKey){
    var zb = await getZbOfName({
      'zbName':zbName
    });
    if(!zb){
      message.error('未找到指标：['+zbName+']');
      return;
    }
    let stom = {
      "zbFilter":zb,
      "zbName": zbKey
    }
    localStorage.setItem('stockFilter',JSON.stringify(stom));
    router.push({
      name: 'ViewsStockSelectStock'
    });
  }

  function getLatestStaticsData() {
    getPatternLatestStatics({}).then((res)=> {
      patternStaticsData.value = res;
    });
  }

  function getMarketViewSectorsData(){
    getMarketViewSectors({}).then(res=>{
      marketViewSectorList.value = res;
    })
  }

  function getMarketStrongStocksData(){
    getMarketStrongStocks({}).then(res=>{
      marketStrongStockList.value = res
      ;
    });
  }

  function getStockSectorDistributeData(){
    getStockSectorDistribute({}).then((res)=> {
      stockSectorDistributeList.value = res;
      nextTick(()=>{
        initChart2();
      });
    });
  }

  function getSectorDistributeData(){
    getSectorDistribute({}).then((res)=> {
      sectorDistributeList.value = res;
      nextTick(()=>{
        initChart1();
      });
    });
  }

  function getStockSignalListData(){
    getStockSignalList({}).then(res=>{
      for(var i=0;i<res.data.length;i++) {
        var item = res.data[i];
        item['smooth']=true;
      }
      stockSignalList.value = res.data;
      stockSignalDates.value = res.xaxis;
      nextTick(()=>{
        initChart3();
      });
    })
  }
  
  function initChart2() {
    let dom = document.getElementById("sectors-distribute");
    dom.removeAttribute('_echarts_instance_'); 
    let chart = echarts.init(dom);
    const option = {
       tooltip: {
          trigger: 'item', // 触发类型为item，表示在圆点上触发显示
          formatter: '{b}: {c}%' // 显示的格式，{b}表示类目值，{c}表示数值
        },
        series: [
          {
            type: "pie", // type设置为饼图
            data: stockSectorDistributeList.value
          }
        ]
      };

    // 把配置和数据放这里
    chart.setOption(option);
    chart.on('click',function (params) {
      filterStockOfSectorName({
        "maxSectorRsName": params.data.name,
        "extras":"a.stock_code in(select stock_code from market_review_strong_stocks where date=(select max(date) from market_review_strong_stocks))"
      });
    })
    window.onresize = function() {
      //自适应大小
      chart.resize();
    };
  }

  function initChart1() {
    let dom = document.getElementById("year-sectors-distribute");
    dom.removeAttribute('_echarts_instance_')
    let chart = echarts.init(dom);
    const option = {
       tooltip: {
          trigger: 'item', // 触发类型为item，表示在圆点上触发显示
          formatter: '{b}: {c}%' // 显示的格式，{b}表示类目值，{c}表示数值
        },
        series: [
          {
            type: "pie", // type设置为饼图
            data: sectorDistributeList.value
          }
        ]
      };

    // 把配置和数据放这里
    chart.setOption(option);
    chart.on('click',function (params) {
      filterStockOfSectorName({
        "maxSectorRsName": params.data.name,
        "extras":"a.high=a.high_MAX_252D"
      });
    })
    window.onresize = function() {
      //自适应大小
      chart.resize();
    };
  }

  function initChart3() {
    let dom = document.getElementById("stock-signal-distribute");
    dom.removeAttribute('_echarts_instance_')
    let chart = echarts.init(dom);
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['UP', 'DOWN' ]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: stockSignalDates.value
        },
        yAxis: {
            type: 'value'
        },
        series: stockSignalList.value
      };

    // 把配置和数据放这里
    chart.setOption(option);
    window.onresize = function() {
      //自适应大小
      chart.resize();
    };
  }

  function loadPageDatas(){
    getLatestStaticsData();
    getMarketViewSectorsData();
    getMarketStrongStocksData();

    getSectorDistributeData();
    getStockSectorDistributeData();
    getStockSignalListData();
  }

  defineExpose({loadPageDatas});

  onMounted(()=> {
    loadPageDatas();
  });
</script>


<style scoped>
  .sort-data-pane {
    height: 99%;
    width: 100%;
    margin: 0 auto;
    border:1px solid #e5e5e5;
    box-shadow: 0 0 .5em #e5e5e5;
    border-radius: 1em;
}

.pane-title {
  padding: 15px;
  padding-bottom: 3px;
  font-size: 1em;
  font-weight: bold;
}

.pane-item-list{
  padding: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 0;
}

.pane-item {
  display: flex;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 6px 8px;
  border: 1px solid #e5e5e5;
  width:48%;
  margin-right: 2%;
  margin-top: 12px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  color:#025FFF;
  cursor: pointer;
}

.pane-item>span {
  display: flex;
}
.pane-item .item-icon {
  flex:1;
}
.pane-item .item-name {
  flex:5;
  text-indent: .5em;
  color: #222222;
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
.pane-item .item-value {
  flex:1;
  /* color: #025FFF; */
  cursor: pointer;
  font-family: Roboto;
}
.pane-item .item-arrow {
  flex:1;
  cursor: pointer;
  margin-top:-5px;
}
.sector-distribute{
  display: flex;
  flex-direction: column;
  flex:4;
  border:1px solid #e5e5e5;
  box-shadow: 0 0 .5em #e5e5e5;
  margin: 0 auto;
  border-radius: 1em;
  padding: 15px;
  width: 100%;
}
.stock-distribute{
  display: flex;
  flex-direction: column;
  border:1px solid #e5e5e5;
  box-shadow: 0 0 .5em #e5e5e5;
  margin: 0 auto;
  border-radius: 1em;
  padding: 15px;
  width: 100%;
}
.distribute-title {
  display: flex;
  font-weight: bold;
}
.chart-title{
  display: flex;
  margin: 0 auto;
  text-align: center;
  padding: 1em;
  font-family: Roboto;
}
</style>